<template>
    <view class="top-box">
        <view class="top-box-bg">
            <image class="top-box-imgs" :src="cinemaModel.pic" mode="aspectFill"></image>
        </view>
        <view class="top-box-cont">
            <view class="top-box-main">
                <u--image :src="cinemaModel.pic" width="183rpx" height="257rpx" radius="10rpx" mode="aspectFill"></u--image>
                <view class="top-box-flex">
                    <view class="top-box-name">{{ cinemaModel.filmName }}</view>
                    <view class="top-box-sorce">
                        <view>评分</view>
                        <view class="top-box-num">{{ cinemaModel.score }}</view>
                    </view>
                    <view class="top-box-txt">{{ cinemaModel.publishDate }} 上映</view>
                    <view class="top-box-txt2">主演：{{ cinemaModel.actor }}</view>
                    <view class="top-box-txt">{{ cinemaModel.filmTypes }}</view>
                    <view class="top-box-txt" v-if="options.type == 1">{{ cinemaModel.duration }}分钟</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        cinemaModel: {
            type: Object,
            default: () => {},
        },
        options: {
            type: Object,
            default: () => {},
        },
    },
};
</script>

<style lang="scss" scoped>
.top-box {
    position: relative;
    min-height: 200rpx;
    padding: 30rpx;
    &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -2;
        filter: blur(15rpx);
        background: #fff;
    }
    &-imgs {
        width: 100%;
        height: 100%;
    }
    &-cont {
        position: relative;
        z-index: 1;
    }
    &-main {
        display: flex;
    }
    &-flex {
        flex: 1;
        margin-left: 20rpx;
    }
    &-name {
        @include font(32rpx, #fff);
        @include txtEilLines(2);
    }
    &-sorce {
        margin-top: 5rpx;
        @include font(26rpx, #fff);
        @include flexCenter;
    }
    &-num {
        margin-left: 5rpx;
        @include font(30rpx, #ff8600, bold);
    }
    &-txt {
        @include font(26rpx, #fff);
    }
    &-txt2 {
        @include font(26rpx, #fff);
        @include txtEilLines(2);
    }
    &-bottom {
        margin-top: 20rpx;
        @include font(24rpx, #fff);
    }
}
</style>
